<script setup lang="ts">
// 导入组件
import Dialog from './Dialog.vue'

// TODO 抽奖号码数据
const lotteryNumbers = ref([33, 22, 46, 66, 50, 65])
// TODO 奖励金额
const reward = ref('100')

// 对话框显示状态
const showDialog = ref(false)

/**
 * 控制对话框显示/隐藏
 * @param isShow - 是否显示对话框
 */
function changeDialog(isShow: boolean) {
  showDialog.value = isShow
}
</script>

<template>
  <!-- 抽奖活动入口卡片 -->
  <div v-click-move class="lotteryActivities" @click="changeDialog(true)">
    <div class="lotteryActivityEntrance" :style="{
      '--bg-image': 'url(/images/activity/cp/bg1.png)',
      '--btn-image': 'url(/images/activity/cp/btn1.png)',
      '--ball1-image': 'url(/images/activity/cp/ball1.png)',
      '--ball2-image': 'url(/images/activity/cp/ball2.png)',
    }">
      <!-- 左侧内容区域：金额和按钮 -->
      <div class="lotteryActivityEntrance_left">
        <!-- 显示金额 -->
        <div class="top">
          {{ apo.utils.formateAmountWithSymbol(reward) }}
        </div>
        <!-- 兑换按钮 -->
        <div class="bottom">
          <div v-click-move class="btn">
            {{ $t('activity.cp.redeem_btn') }}
          </div>
        </div>
      </div>

      <!-- 右侧内容区域：抽奖号码球 -->
      <div class="lotteryActivityEntrance_right">
        <div v-for="(number, index) in lotteryNumbers" :key="index" class="ball"
          :class="[{ special: index === lotteryNumbers.length - 1 }]">
          {{ number }}
        </div>
      </div>
    </div>
  </div>

  <!-- 抽奖对话框 -->
  <Dialog :show="showDialog" @close="changeDialog(false)" />
</template>

<style scoped lang="scss">
/* 抽奖活动入口卡片样式 */
.lotteryActivityEntrance {
  position: relative;
  margin: 0 0.25rem;
  height: 1.65rem;
  background: var(--bg-image) no-repeat;
  background-size: 100% 100%;

  /* 左侧内容区域样式 */
  .lotteryActivityEntrance_left {
    padding: 0.1rem 0 0.1rem 0.37rem;

    /* 金额显示样式 */
    .top {
      margin-bottom: 0.1rem;
      font-weight: 800;
      font-size: 0.5rem;
      text-indent: 1.4rem;
      background: linear-gradient(0deg, #fff 0%, #fff75e 48.08%, #ff9500 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* 按钮容器样式 */
    .bottom {
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.28rem;
        height: 0.72rem;
        margin-left: 0.34rem;
        background: var(--btn-image) no-repeat;
        background-size: 100% 100%;
        font-weight: 800;
        font-size: 0.34rem;
        color: #b40c0c;
      }
    }
  }

  /* 右侧抽奖号码球区域样式 */
  .lotteryActivityEntrance_right {
    position: absolute;
    right: 0.32rem;
    bottom: 0.25rem;
    display: flex;
    gap: 0.16rem;

    /* 号码球样式 */
    .ball {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0.7rem;
      height: 0.7rem;
      background: var(--ball1-image) no-repeat;
      background-size: 100% 100%;
      font-weight: 800;
      font-size: 0.38rem;
      color: #000c;

      /* 特殊球样式（最后一个球） */
      &.special {
        background: var(--ball2-image) no-repeat;
        background-size: 100% 100%;
        color: #fff;
      }
    }
  }
}
</style>
